<template>
  <el-dialog :title="option.title" :visible.sync="option.isShow" width="80%" :close-on-click-modal="false"
    @open="openDialog" @close="closeDialog('ruleForm')">
    <el-row :gutter="10">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-col :span="12">
          <el-form-item label="渠道" prop="CHANNELTYPE">
            <el-select v-model="ruleForm.CHANNELTYPE"  size="small" clearable placeholder="请选择渠道">
              <el-option v-for="item in option.channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                :value="item.FIELDKEY"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="渠道名称" prop="CHANNELTYPE">
            <el-select v-model="ruleForm.CHANNELTYPE" disabled  size="small" clearable placeholder="请选择渠道名称">
              <el-option v-for="item in option.channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                :value="item.FIELDKEY"></el-option>
            </el-select>
            <!-- <el-input v-model="ruleForm.CHANNELNAME" disabled size="small" placeholder="请输入渠道名称"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大笔数" prop="MAXNUM">
            <el-input v-model="ruleForm.MAXNUM" size="small" placeholder="请输入最大笔数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最小笔数" prop="MINNUM">
            <el-input v-model="ruleForm.MINNUM" size="small" placeholder="请输入最小笔数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="过滤条件" prop="REQSTRUCT">
            <el-select v-model="ruleForm.REQSTRUCT" multiple @change="changeRule" size="small" clearable
              placeholder="请选择渠道">
              <el-option v-for="item in option.dictionaryOption" :key="item.ID" :value="item.ID"
                :label="item.COLUMNID+'—'+item.ROLELEVEL+'—'+item.ROLELEVELNAME"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-table border :data="tableData">
            <el-table-column prop="ID" align="center" width="80" label="ID"></el-table-column>
            <el-table-column prop="COLUMNID" align="center" label="表列字段"></el-table-column>
            <el-table-column prop="COLUMNNAME" align="center" label="表列名"></el-table-column>
            <el-table-column prop="ROLELEVEL" align="center" label="规则条件"></el-table-column>
            <el-table-column prop="ROLELEVELNAME" align="center" label="添加名"></el-table-column>
            <el-table-column align="center" label="权重">
              <template slot-scope="scope">
                <div>
                  <el-select size="mini" @change="changeWeight" v-model="scope.row.WEIGHT">
                    <el-option v-for="item in 20" :key="item" :value="item*5" :label="item*5"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注">
              <template slot-scope="scope">
                <div>
                  <el-input @input="changeRemark" v-model="scope.row.REMARK1" size="mini" placeholder="请输入备注"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" style="margin-top:20px;">
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import ruleManage from '@/message/QCManage/sampleManage/autoSampleRules/autoSampleRulesManage';

  export default {
    props: {
      option: Object
    },
    computed: {
      isShow: {
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    mounted() {},
    data() {
      return {
        tableData: [],
        ruleForm: {
          MAXNUM: '', //渠道最大笔数
          CHANNELTYPE: '', //渠道
          CHANNELNAME: '', //渠道名称
          MINNUM: '', //渠道最小笔数
          REQSTRUCT: [] //请求集合
        },
        rules: {
          CHANNELNAME: [{
            required: true,
            message: '请输入渠道名称',
            trigger: 'blur'
          }],
          CHANNELTYPE: [{
            required: true,
            message: '请选择渠道',
            trigger: ''
          }],
          MINNUM: [{
            required: true,
            message: '请输入最小笔数',
            trigger: 'blur'
          }],
          MAXNUM: [{
            required: true,
            message: '请输入最大笔数',
            trigger: 'blur'
          }]
        },
        loading: false,
      };
    },
    created() {

    },
    methods: {
      changeRemark(val){
        this.tableData = JSON.parse(JSON.stringify(this.tableData))
      },
      changeWeight(val){
        this.tableData = JSON.parse(JSON.stringify(this.tableData))
      },
      changeRule(val) {
        let data = []
        this.ruleForm.REQSTRUCT.forEach(item => {
          data.push(this.findName(item))
        })
        this.tableData = data
      },
      findName(val) {
        let data = this.option.dictionaryOption.filter(item => {
          return item.ID == val
        })
        return data[0]
      },
      openDialog() {
        if (this.option.flag == 'add') {
        this.tableData = []
          this.ruleForm = {
            MAXNUM: '', //渠道最大笔数
            CHANNELTYPE: '', //渠道
            CHANNELNAME: '', //渠道名称
            MINNUM: '', //渠道最小笔数
            REQSTRUCT: [] //请求集合
          }
        } else {
          
          this.ruleForm = JSON.parse(JSON.stringify(this.option.row));
          console.log(this.option.ID)
          this.ruleForm.REQSTRUCT = JSON.parse(JSON.stringify(this.option.ID))
          // this.$forceUpdate()
          this.tableData = this.option.tableData
        }
      },
      closeDialog(formName) {
        this.tableData= []
        this.$refs[formName].clearValidate();
        this.$refs[formName].resetFields();
        this.ruleForm = {
            MAXNUM: '', //渠道最大笔数
            CHANNELTYPE: '', //渠道
            CHANNELNAME: '', //渠道名称
            MINNUM: '', //渠道最小笔数
            REQSTRUCT: [] //请求集合
          }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let weightFlag = true
            let sum = 0
            this.tableData.forEach(item=>{
              if(item.WEIGHT == ''){
                weightFlag = false
                return 
              }
              sum+=Number(item.WEIGHT)
            })
             if (sum != 100) {
              this.$message.error('权重值的和需为100，请重新选择！')
              return
            }
            if (weightFlag == false) {
              this.$message.error('请输入权重')
              return
            }
            let data = []
            this.tableData.forEach(item=>{
              data.push({
                MATCHNO:item.COLUMNID,
                MATCH:item.ROLELEVEL,
                MATCHNAME:item.ROLELEVELNAME,
                WEIGHT:item.WEIGHT,
                REMARK1:item.REMARK1,
              })
            })
            let name = ''
            this.option.channelOption.forEach(item=>{
              if(item.FIELDKEY == this.ruleForm.CHANNELTYPE){
                name = item.FIELDVALUE
                return
              }
            })
            let resBody = new ruleManage()
            resBody.data.OPERATE = this.option.flag == 'update' ? 'U' : 'I'
            resBody.data.MAXNUM = this.ruleForm.MAXNUM
            resBody.data.CHANNELNAME = name
            resBody.data.CHANNELTYPE = this.ruleForm.CHANNELTYPE
            resBody.data.MINNUM = this.ruleForm.MINNUM
            resBody.data.REQSTRUCT = data
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
              if (this.option.flag == 'update') {
                this.$message({
                  type: 'success',
                  message: '修改成功！'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: '新增成功！'
                })
              }
              this.isShow = false;
              this.$emit("refreshTable");
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD
                  .ReturnMessage
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].clearValidate();
          this.$refs[formName].resetFields();
        }
      }
    }
  };

</script>

<style scoped>

</style>
